<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="450" height="520" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Helper function to draw a double-headed arrow
    function drawDoubleArrow(ctx, x1, y1, x2, y2, headlen = 10) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        
        // Arrow head at (x2, y2)
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));

        // Arrow head at (x1, y1)
        const angle2 = Math.atan2(-dy, -dx);
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 - headlen * Math.cos(angle2 - Math.PI / 6), y1 - headlen * Math.sin(angle2 - Math.PI / 6));
        ctx.moveTo(x1, y1);
        ctx.lineTo(x1 - headlen * Math.cos(angle2 + Math.PI / 6), y1 - headlen * Math.sin(angle2 + Math.PI / 6));
        ctx.stroke();
    }

    // Helper function to draw a single-headed arrow
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = "black";
    ctx.fillStyle = "black";
    
    // Coordinates
    const wireX = 100;
    const rectX = 180;
    const rectWidth = 150;
    const rectY = 100;
    const rectHeight = 200; // l
    const rectRightX = rectX + rectWidth;
    const rectBottomY = rectY + rectHeight;
    
    // 1. Draw the long straight wire
    ctx.beginPath();
    ctx.moveTo(wireX, 40);
    ctx.lineTo(wireX, 440);
    ctx.stroke();

    // 2. Draw the current I
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.textAlign = "center";
    drawArrow(ctx, wireX, 150, wireX, 120, 10);
    ctx.fillText("I", wireX - 25, 140);

    // 3. Draw the rectangle
    ctx.strokeRect(rectX, rectY, rectWidth, rectHeight);

    // 4. Draw dimension l
    const dimL_X = rectRightX + 40;
    ctx.beginPath();
    ctx.moveTo(rectRightX, rectY);
    ctx.lineTo(dimL_X, rectY);
    ctx.moveTo(rectRightX, rectBottomY);
    ctx.lineTo(dimL_X, rectBottomY);
    ctx.stroke();
    drawDoubleArrow(ctx, dimL_X, rectY, dimL_X, rectBottomY, 10);
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText("l", dimL_X + 20, rectY + rectHeight / 2 + 8);
    
    // 5. Draw dimensions d1 and d2
    const dim_d1_y = rectBottomY + 50;
    const dim_d2_y = rectBottomY + 80;

    // Dimension d1
    ctx.beginPath();
    ctx.moveTo(wireX, dim_d1_y-5); ctx.lineTo(wireX, dim_d1_y+5);
    ctx.moveTo(rectX, dim_d1_y-5); ctx.lineTo(rectX, dim_d1_y+5);
    ctx.stroke();
    drawDoubleArrow(ctx, wireX, dim_d1_y, rectX, dim_d1_y, 10);
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText("d", (wireX + rectX) / 2, dim_d1_y - 8);
    ctx.font = "italic 15px 'Times New Roman'";
    ctx.fillText("1", (wireX + rectX) / 2 + 10, dim_d1_y - 4);

    // Dimension d2
    ctx.beginPath();
    ctx.moveTo(wireX, dim_d2_y-5); ctx.lineTo(wireX, dim_d2_y+5);
    ctx.moveTo(rectRightX, dim_d2_y-5); ctx.lineTo(rectRightX, dim_d2_y+5);
    ctx.stroke();
    drawDoubleArrow(ctx, wireX, dim_d2_y, rectRightX, dim_d2_y, 10);
    ctx.font = "italic 20px 'Times New Roman'";
    ctx.fillText("d", (wireX + rectRightX) / 2, dim_d2_y - 8);
    ctx.font = "italic 15px 'Times New Roman'";
    ctx.fillText("2", (wireX + rectRightX) / 2 + 10, dim_d2_y - 4);
    
    // 6. Draw the caption
    ctx.font = "24px 'KaiTi'"; // A common Chinese font
    ctx.textAlign = "center";
    ctx.fillText("题 3 图", canvas.width / 2, 480);
</script>
</body>
</html>